<template>
  <div class="dashboard-container">
    <l-map
      :zoom="zoom"
      :center="center"
      :options="options"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
    >
      <l-tile-layer v-for="(item,index) in urls" :key="index" :url="item" />
      <map-markers v-if="markersDialogVisible" @showDevice="showDevice" />
      <map-polygons v-if="polygonsDialogVisible" @showPolygon="showPolygon" />
      <el-dialog
        v-el-drag-dialog
        :title="deviceContainerTitle"
        :visible.sync="deviceContainerVisible"
        fullscreen
        @close="dialogClose"
      >
        <span
          v-if="currentDevice"
          slot="title"
          class="device-header"
        >
          <el-image
            class="device-image"
            :src="getDeviceImage(currentDevice)"
            :fit="fit"
          />
          {{ currentDevice.name + ' —— ' + currentDevice.serialno }}
        </span>
        <dg />
        <sf />
        <sb />
        <pg />
        <qxz />
        <sqz />
        <gcwd />
        <gd />
        <ndvi />
        <gps />
        <spjk />
        <zyp />
        <fdj />
        <llj />
        <fkq />
      </el-dialog>
    </l-map>
    <left :dashboard-data="dashboardData" />
    <right :dashboard-data="dashboardData" />
  </div>
</template>

<script>
import map from '@/config/map'
import { mapGetters } from 'vuex'
import MapMarkers from '@/views/dashboard/components/map-markers'
import MapPolygons from './components/map-polygons'
import Dg from '@/components/Device/Dg'
import Sf from '@/components/Device/Sf'
import Sb from '@/components/Device/Sb'
import Pg from '@/components/Device/Pg'
import Qxz from '@/components/Device/Qxz'
import Sqz from '@/components/Device/Sqz'
import Gcwd from '@/components/Device/Gcwd'
import Gd from '@/components/Device/Gd'
import Ndvi from '@/components/Device/Ndvi'
import Gps from '@/components/Device/Gps'
import Spjk from '@/components/Device/Spjk'
import Zyp from '@/components/Device/Zyp'
import Fdj from '@/components/Device/Fdj'
import Llj from '@/components/Device/Llj'
import Fkq from '@/components/Device/Fkq'
import Left from './components/left'
import Right from './components/right'
import { getDeviceImage } from '@/utils/device'
import { dashboard } from '@/api/initial'
export default {
  components: {
    MapMarkers,
    MapPolygons,
    Dg,
    Sf,
    Sb,
    Pg,
    Qxz,
    Sqz,
    Gcwd,
    Gd,
    Ndvi,
    Gps,
    Spjk,
    Zyp,
    Fdj,
    Llj,
    Fkq,
    Left,
    Right
  },
  data() {
    return {
      zoom: 13,
      center: map.center,
      options: map.options,
      urls: map.mapTypes[map.initType],
      markersDialogVisible: false,
      polygonsDialogVisible: false,
      currentDevice: null,
      deviceContainerTitle: '',
      deviceContainerVisible: false,
      fit: 'fill',
      dashboardData: {}
    }
  },
  inject: ['reload'],
  computed: {
    ...mapGetters(['project', 'devices', 'projects'])
  },
  watch: {
    project: {
      handler(newVal) {
        this.markersDialogVisible = newVal.show_device || false
        this.polygonsDialogVisible = newVal.show_field || false
        if (newVal.map) {
          this.urls = map.mapTypes[newVal.map]
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.center = [this.project.lat, this.project.lng]
    this.dashboard()
  },
  methods: {
    async dashboard() {
      const { data } = await dashboard({ project_id: this.project.id })
      this.dashboardData = data
    },
    zoomUpdate(zoom) {
      this.zoom = zoom
    },
    centerUpdate(center) {
      this.center = center
    },
    showDevice(currentDevice) {
      this.currentDevice = currentDevice
      this.$store.commit('device/SET_CURRENT_DEVICE', currentDevice)
      this.$store.commit('device/SET_CURRENT_DEVICE_SHOW', true)
      this.serialno = currentDevice.serialno
      this.deviceContainerTitle = currentDevice.name
      this.deviceContainerVisible = true
    },
    showPolygon() {
      console.log('showPolygon')
    },
    getDeviceImage(device) {
      return getDeviceImage(device)
    },
    dialogClose() {
      this.$store.commit('device/SET_CURRENT_DEVICE_SHOW', false)
    }
  }
}
</script>
<style lang="scss">
.device-header{
  font-size:16px;
  display:flex;
  align-items:center;
}
</style>
<style lang="scss" scoped>

.device-image{
  width:32px;
  height:32px;
  margin-right:8px;
}
.dashboard {
  &-container {
    position:relative;
    width:100%;
    height:calc(100vh - 50px);
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
